<div id="navWrapper" class="overflow-y-auto z-20 h-full bg-white scrolling-touch max-w-2xs lg:h-[calc(100vh-3rem)] lg:block lg:sticky top:24 lg:top-28 dark:bg-gray-900 lg:mr-0">
  <nav id="nav" class="pt-16 px-1 pl-3 lg:pl-0 lg:pt-2 font-normal text-base lg:text-sm pb-10 lg:pb-20 sticky?lg:h-(screen-18)" aria-label="Docs navigation">
    {{- $url := split .Permalink "/" -}}
    {{- $page_slug := index $url (sub (len $url) 2) -}}

    <ul class="mb-0 list-unstyled">
    {{- range $group := .Site.Data.sidebar -}}
      {{- $link := $group.title -}}
      {{- $link_slug := $link | urlize -}}
  
      {{- if $group.pages -}}
        {{- $link = index $group.pages 0 -}}
        {{- $link_slug = $link.title | urlize -}}
      {{- end -}}
  
      {{- $group_slug := $group.slug -}}
      {{- $is_active_group := eq $.Page.Params.group $group_slug -}}
  
      {{- if $group.pages }}
        <li class="mt-8">
          <h5 class="mb-2 text-sm font-semibold tracking-wide text-gray-900 uppercase lg:text-xs dark:text-white">{{ $group.title }}</h5>
          <ul class="py-1 list-unstyled fw-normal small">
            {{- range $doc := $group.pages -}}
              {{- $doc_slug := "" -}}
              {{- if $doc.slug -}}
                {{- $doc_slug = $doc.slug -}}
              {{- else -}}
                {{- $doc_slug = $doc.title | urlize -}}
              {{- end -}}
              {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
              {{- $href := printf "/docs/%s/%s/" $group_slug $doc_slug }}
              <li>
                <a href="{{ $href }}" data-sidebar-item class="py-2 transition-colors duration-200 relative flex items-center flex-wrap font-medium hover:text-gray-900 text-gray-500 dark:text-gray-400 dark:hover:text-white {{ if $is_active }} !text-blue-700 hover:!text-blue-700 dark:!text-blue-500 dark:hover:!text-blue-500{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }} {{ if ( eq $doc.new true) }}<span><span class="bg-blue-100 text-blue-800 text-2xs font-semibold ml-2 px-1.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-100 dark:border-blue-400">NEW</span></span>{{ end }}</a>
              </li>
            {{- end }}
          </ul>
        </li>
      {{- else }}
        <li class="mx-4 my-3 border-top"></li>
        <li>
          <a href="/{{ $group_slug }}/" data-sidebar-item class="d-inline-flex align-items-center {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
            {{ $group.title }}
          </a>
        </li>
      {{- end }}
    {{- end }}
    </ul>
  </nav>
</div>

